<template>
	<view class="content">
		<view class="user-ing" v-for="(item,i) in notUse" :key="i">
			<view class="top-imgs-top">
				<view class="img-box">
					<image class="img" v-if="item.photo" :src="base64Img(item.photo)" mode=""></image>
					<view class="span1">
						{{item.chang_guan_name}}
					</view>
				</view>

				<view class="deleted" @click="_tuikuanFunction(item.record_id)">
					退订
				</view>
			</view>

			<view class="user-changdi">
				<view class="title">
					{{'场地:' + ' ' + item.chang_di_name}}
				</view>
				<view class="title2">
					{{'金额' + ' ' + item.feiyong}}
				</view>
			</view>

			<view class="time-content">
				<view class="time-item" v-for="(item2,i2) in item.time"  :key="i2">
					{{slipTime(item2)}}
				</view>
			</view>

			<view class="day-tiem">
				<view class="span1">
					日期:
				</view>
				<view class="span2">
					{{item.start_date}}
				</view>
			</view>

			<view class="user-content">
				<view class="user-name">
					{{ '用户名:' + ' ' + item.appointment_person}}
				</view>
				<view class="user-tel">
					{{ '联系电话:' + ' ' + item.appointment_phone}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		getNoUse,
		tuikuanFunction
	} from '../../../api/mine_api.js'

	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	import {
		base64Img
	} from '../../../tools/tools.js'

	const notUse = ref([])
	const jinchengSetting = ref(true)
	// 获取未使用
	const _getNoUseList = () => {
		uni.getStorage({
			key: 'openid',
			success: function(res) {
				if (res.errMsg != 'setStorage:ok') {
					getNoUse(res.data.openid).then((res2) => {
						console.log(res2);
						notUse.value = res2.result
						uni.hideLoading();
						// 如果没有数值
						if (notUse.value.length == 0) {
							uni.showModal({
								title: '提示',
								content: '没有未使用的预约',
								success() {
									uni.navigateBack({
										delta: 1
									})
								}
							})

						}
					})
				}
			}
		})
	}

	// 退款
	const _tuikuanFunction = (id) => {
		console.log(id);
		uni.showModal({
			title: '取消订单',
			content: '确认要取消订单吗？',
			success: function(res) {
				if (res.confirm) {
					if (jinchengSetting.value == true) {
						jinchengSetting.value = false
						tuikuanFunction(id).then((res2) => {
							console.log(res2);
					
							uni.showModal({
								title: '提示',
								content: res2.result
							})

							_getNoUseList()
							jinchengSetting.value = true
						})
					} else {
						console.log('进程阻断中');
					}
				} else {}
			}
		})

	}


	const slipTime = (time) => {
		// 用 - 分隔开始时间和结束时间
		const [startTime, endTime] = time.split('-');

		// 处理开始时间
		const startResult = startTime.replace(/^0/, '').split(':').slice(0, 2).join(':');
		// 处理结束时间
		const endResult = endTime.replace(/^0/, '').split(':').slice(0, 2).join(':');

		return '开始时间:' + startResult + ' - ' + '结束时间:' + endResult

	}

	onLoad(() => {
		_getNoUseList()
		uni.showLoading({
			title: '加载中'
		});
	})
</script>


<style scoped>
	@font-face {
		font-family: CustomFont;
		src: url('./iconfont.ttf');
	}
</style>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: linear-gradient(to bottom, rgba(135, 213, 255, 1) 0%, rgba(211, 211, 211, 0.58) 42%, rgba(211, 211, 211, 0) 100%);
		padding-top: 20rpx;

		.user-ing {
			margin-bottom: 20rpx;
			margin-right: 20rpx;
			margin-left: 20rpx;
			background-color: white;
			padding: 20rpx;
			border-radius: 20rpx;
			border: 1px solid gainsboro;

			.top-imgs-top {
				display: flex;
				margin-bottom: 14rpx;
				justify-content: space-between;

				.img-box {
					display: flex;

					.img {
						width: 80rpx;
						height: 80rpx;
						margin-right: 20rpx;
						border-radius: 10rpx;
					}

					.span1 {
						line-height: 80rpx;
					}
				}

				.deleted {
					margin-top: 8rpx;
					background-color: #2ab4ff;
					color: white;
					border-radius: 10rpx;
					padding: 0 10rpx;
					height: 44rpx;
					line-height: 44rpx;
				}

			}

			.user-changdi {
				display: flex;
				justify-content: space-between;
			}

			.day-tiem {
				display: flex;
			}

			.time-content {
				display: flex;
				flex-direction: column;

				.time-item {}
			}

			.user-content {
				display: flex;
				justify-content: space-between;

				.user-name {
					margin-right: 20rpx;
				}

				.user-tel {
					margin-right: 40rpx;
				}
			}
		}
	}
</style>